<template>
  <KDialog
    v-model="visible"
    width="small"
    :show-footer="false"
    @cancel="visible = false"
  >
    <div class="generation-box">
      <div class="img-preview-box">
        <el-image :src="previewInfo.banner_url" width="128" alt="" fit="contain" />
      </div>
      <div class="link-box">
        <span>折扣活动链接</span>
        <el-input v-model="previewInfo.activity_url" class="discount-inp" disabled />
        <el-button
          size="small"
          type="primary"
          :disabled="!previewInfo.activity_url"
          @click="onClickCopyLink"
        >复制</el-button>
      </div>
    </div>
  </KDialog>
</template>

<script setup lang='ts'>
import { computed, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { KDialog } from '@/components/k-dialog';
import { toolCopyText } from '@/utils';
defineOptions({
  name: 'AgencyKgjLecturerDiscountListBannerModal'
});
const previewInfo = ref<Record<string, any>>({});
const visible = ref(false);

// 复制链接
const onClickCopyLink = () => {
  if (previewInfo.value.activity_url) {
    toolCopyText(previewInfo.value.activity_url);
    ElMessage.success('复制成功');
  }
};
const show = (row: Record<string, any>) => {
  previewInfo.value = row;
  visible.value = true;
};
defineExpose({
  show
});
</script>

<style lang="scss" scoped>
.generation-box {
  .img-preview-box {
    display: flex;
    justify-content: center;
    width: 128px;
    height: 128px;
    margin: 0 auto;
    margin-bottom: 20px;
    background-color: #f1f1f1;
  }

  .activity_url-box {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .discount-inp {
    width: 280px;
    margin: 0 10px;
  }
}
</style>
